<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历编辑器 - 突袭简历</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/resume-editor.css">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <a href="index.html">
                    <span class="logo-text">突袭简历</span>
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="templates.html">简历模板</a></li>
                    <li><a href="resume-editor.html" class="active">简历编辑</a></li>
                    <li><a href="resume-analysis.html">AI分析</a></li>
                    <li><a href="pricing.html">会员服务</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <div class="user-dropdown">
                    <button class="user-dropdown-toggle">
                        <span class="user-avatar">👤</span>
                        <span class="user-name">张三</span>
                        <span class="dropdown-icon">▼</span>
                    </button>
                    <div class="user-dropdown-menu">
                        <a href="dashboard.html">个人中心</a>
                        <a href="my-resumes.html">我的简历</a>
                        <a href="account-settings.html">账号设置</a>
                        <a href="#" class="logout-link">退出登录</a>
                    </div>
                </div>
            </div>
            <button class="mobile-menu-toggle">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>

    <div class="editor-container">
        <div class="editor-sidebar">
            <div class="resume-info">
                <input type="text" class="resume-title-input" value="产品经理简历" placeholder="简历标题">
                <div class="resume-actions">
                    <button class="btn btn-sm btn-outline" id="save-btn">
                        <span>💾</span>
                        <span>保存</span>
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-primary dropdown-toggle" id="export-btn">
                            <span>📥</span>
                            <span>导出</span>
                            <span class="dropdown-icon">▼</span>
                        </button>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item" data-format="pdf">PDF格式</a>
                            <a href="#" class="dropdown-item" data-format="word">Word格式</a>
                            <a href="#" class="dropdown-item" data-format="txt">纯文本</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="template-preview">
                <div class="template-placeholder">📄 模板预览</div>
                <button class="btn btn-sm btn-outline" id="change-template-btn">更换模板</button>
            </div>
            <div class="editor-tabs">
                <button class="editor-tab active" data-tab="content">内容</button>
                <button class="editor-tab" data-tab="style">样式</button>
                <button class="editor-tab" data-tab="settings">设置</button>
            </div>
            <div class="editor-sections" id="content-tab">
                <div class="section-item active" data-section="basic">
                    <div class="section-header">
                        <span>👤</span>
                        <span>基本信息</span>
                        <span class="section-toggle">▼</span>
                    </div>
                </div>
                <div class="section-item" data-section="education">
                    <div class="section-header">
                        <span>🎓</span>
                        <span>教育经历</span>
                        <span class="section-toggle">▼</span>
                    </div>
                </div>
                <div class="section-item" data-section="experience">
                    <div class="section-header">
                        <span>💼</span>
                        <span>工作经历</span>
                        <span class="section-toggle">▼</span>
                    </div>
                </div>
                <div class="section-item" data-section="projects">
                    <div class="section-header">
                        <span>🚀</span>
                        <span>项目经历</span>
                        <span class="section-toggle">▼</span>
                    </div>
                </div>
                <div class="section-item" data-section="skills">
                    <div class="section-header">
                        <span>⚡</span>
                        <span>技能特长</span>
                        <span class="section-toggle">▼</span>
                    </div>
                </div>
                <div class="section-item" data-section="certificates">
                    <div class="section-header">
                        <span>🏆</span>
                        <span>证书奖项</span>
                        <span class="section-toggle">▼</span>
                    </div>
                </div>
                <div class="section-item" data-section="languages">
                    <div class="section-header">
                        <span>🌐</span>
                        <span>语言能力</span>
                        <span class="section-toggle">▼</span>
                    </div>
                </div>
                <div class="section-item" data-section="interests">
                    <div class="section-header">
                        <span>🎨</span>
                        <span>兴趣爱好</span>
                        <span class="section-toggle">▼</span>
                    </div>
                </div>
                <div class="add-section">
                    <button class="btn btn-text" id="add-section-btn">
                        <span>➕</span>
                        <span>添加新板块</span>
                    </button>
                </div>
            </div>
            <div class="editor-sections" id="style-tab" style="display: none;">
                <div class="style-group">
                    <h3>颜色主题</h3>
                    <div class="color-themes">
                        <button class="color-theme active" style="--theme-color: #2563eb;"></button>
                        <button class="color-theme" style="--theme-color: #16a34a;"></button>
                        <button class="color-theme" style="--theme-color: #dc2626;"></button>
                        <button class="color-theme" style="--theme-color: #7c3aed;"></button>
                        <button class="color-theme" style="--theme-color: #ea580c;"></button>
                        <button class="color-theme" style="--theme-color: #0891b2;"></button>
                        <button class="color-theme" style="--theme-color: #4b5563;"></button>
                        <button class="color-theme custom">
                            <img src="images/icon-plus.svg" alt="自定义">
                        </button>
                    </div>
                </div>
                <div class="style-group">
                    <h3>字体</h3>
                    <div class="select-wrapper">
                        <select class="form-select" id="font-family">
                            <option value="system">系统默认</option>
                            <option value="pingfang">苹方</option>
                            <option value="microsoft">微软雅黑</option>
                            <option value="simsun">宋体</option>
                            <option value="simhei">黑体</option>
                            <option value="kaiti">楷体</option>
                        </select>
                    </div>
                </div>
                <div class="style-group">
                    <h3>字体大小</h3>
                    <div class="range-slider">
                        <input type="range" min="12" max="18" value="14" class="slider" id="font-size">
                        <div class="range-value">14px</div>
                    </div>
                </div>
                <div class="style-group">
                    <h3>行距</h3>
                    <div class="range-slider">
                        <input type="range" min="1" max="2" step="0.1" value="1.5" class="slider" id="line-height">
                        <div class="range-value">1.5</div>
                    </div>
                </div>
                <div class="style-group">
                    <h3>页边距</h3>
                    <div class="range-slider">
                        <input type="range" min="10" max="30" value="20" class="slider" id="page-margin">
                        <div class="range-value">20mm</div>
                    </div>
                </div>
                <div class="style-group">
                    <h3>板块间距</h3>
                    <div class="range-slider">
                        <input type="range" min="10" max="30" value="20" class="slider" id="section-spacing">
                        <div class="range-value">20px</div>
                    </div>
                </div>
            </div>
            <div class="editor-sections" id="settings-tab" style="display: none;">
                <div class="settings-group">
                    <h3>简历设置</h3>
                    <div class="form-group">
                        <label for="paper-size">纸张大小</label>
                        <div class="select-wrapper">
                            <select class="form-select" id="paper-size">
                                <option value="a4">A4 (210 × 297 mm)</option>
                                <option value="letter">Letter (216 × 279 mm)</option>
                                <option value="legal">Legal (216 × 356 mm)</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="orientation">纸张方向</label>
                        <div class="select-wrapper">
                            <select class="form-select" id="orientation">
                                <option value="portrait">纵向</option>
                                <option value="landscape">横向</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group checkbox-group">
                        <input type="checkbox" id="show-page-number" checked>
                        <label for="show-page-number">显示页码</label>
                    </div>
                </div>
                <div class="settings-group">
                    <h3>隐私设置</h3>
                    <div class="form-group checkbox-group">
                        <input type="checkbox" id="hide-contact" checked>
                        <label for="hide-contact">导出时隐藏联系方式</label>
                    </div>
                    <div class="form-group checkbox-group">
                        <input type="checkbox" id="hide-photo">
                        <label for="hide-photo">导出时隐藏照片</label>
                    </div>
                </div>
            </div>
            <div class="ai-assistant">
                <button class="ai-assistant-toggle">
                    <span>🤖</span>
                    <span>AI助手</span>
                </button>
                <div class="ai-assistant-panel">
                    <div class="ai-assistant-header">
                        <h3>AI简历助手</h3>
                        <button class="ai-assistant-close">&times;</button>
                    </div>
                    <div class="ai-assistant-content">
                        <div class="ai-suggestions">
                            <h4>智能建议</h4>
                            <div class="ai-suggestion-item">
                                <span>💡</span>
                                <p>您的工作经历缺少具体的数据支持，建议添加量化成果。</p>
                                <button class="btn btn-sm btn-outline">应用</button>
                            </div>
                            <div class="ai-suggestion-item">
                                <span>💡</span>
                                <p>技能部分可以更具体，建议添加熟练程度。</p>
                                <button class="btn btn-sm btn-outline">应用</button>
                            </div>
                        </div>
                        <div class="ai-actions">
                            <button class="btn btn-sm btn-outline">
                                <span>✨</span>
                                <span>优化表达</span>
                            </button>
                            <button class="btn btn-sm btn-outline">
                                <span>📝</span>
                                <span>语法检查</span>
                            </button>
                            <button class="btn btn-sm btn-outline">
                                <span>🎯</span>
                                <span>ATS分析</span>
                            </button>
                        </div>
                        <div class="ai-chat">
                            <div class="ai-chat-messages">
                                <div class="ai-message">
                                    <span class="ai-avatar">🤖</span>
                                    <div class="message-content">
                                        <p>您好！我是您的AI简历助手。有什么可以帮助您的吗？</p>
                                    </div>
                                </div>
                            </div>
                            <div class="ai-chat-input">
                                <input type="text" placeholder="输入问题或指令...">
                                <button class="send-btn">
                                    <span>📤</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="editor-main">
            <div class="editor-form-container">
                <div class="section-form" id="basic-form">
                    <h2>基本信息</h2>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="fullname">姓名</label>
                            <input type="text" id="fullname" class="form-control" value="张三">
                        </div>
                        <div class="form-group">
                            <label for="job-title">求职意向</label>
                            <input type="text" id="job-title" class="form-control" value="高级产品经理">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="phone">手机号码</label>
                            <input type="tel" id="phone" class="form-control" value="13800138000">
                        </div>
                        <div class="form-group">
                            <label for="email">电子邮箱</label>
                            <input type="email" id="email" class="form-control" value="zhangsan@example.com">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="location">所在城市</label>
                            <input type="text" id="location" class="form-control" value="北京">
                        </div>
                        <div class="form-group">
                            <label for="birth">出生年月</label>
                            <input type="text" id="birth" class="form-control" value="1990-01">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="summary">个人简介</label>
                        <textarea id="summary" class="form-control" rows="4">7年产品经验，专注于企业级SaaS产品设计与开发。主导过多个从0到1的产品，擅长用户研究、需求分析和产品规划。具有良好的沟通能力和团队协作精神，能够有效连接业务、设计和技术团队。</textarea>
                    </div>
                    <div class="form-group photo-upload">
                        <label>个人照片</label>
                        <div class="photo-preview">
                            <div class="photo-placeholder" id="photo-preview">📷 照片预览</div>
                            <button class="photo-upload-btn">
                                <span>📁</span>
                                <span>上传照片</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="editor-preview">
            <div class="preview-toolbar">
                <div class="preview-actions">
                    <button class="btn btn-sm btn-outline" id="preview-mode-btn">
                        <span>👁️</span>
                        <span>预览模式</span>
                    </button>
                    <button class="btn btn-sm btn-outline" id="zoom-out-btn">
                        <span>🔍-</span>
                    </button>
                    <span class="zoom-level">100%</span>
                    <button class="btn btn-sm btn-outline" id="zoom-in-btn">
                        <span>🔍+</span>
                    </button>
                </div>
                <div class="page-navigation">
                    <span class="page-info">第 1 页 / 共 2 页</span>
                    <div class="page-buttons">
                        <button class="btn btn-sm btn-icon" id="prev-page-btn" disabled>
                            <span>◀</span>
                        </button>
                        <button class="btn btn-sm btn-icon" id="next-page-btn">
                            <span>▶</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="preview-container">
                <div class="resume-preview-page">
                    <div class="resume-content">
                        <!-- 简历预览内容将通过JavaScript动态生成 -->
                        <div class="resume-header">
                            <div class="resume-name-title">
                                <h1>张三</h1>
                                <p class="resume-title">高级产品经理</p>
                            </div>
                            <div class="resume-contact">
                                <p><span>📞</span> 13800138000</p>
                                <p><span>📧</span> zhangsan@example.com</p>
                                <p><span>📍</span> 北京</p>
                            </div>
                        </div>
                        <div class="resume-summary">
                            <h2>个人简介</h2>
                            <p>7年产品经验，专注于企业级SaaS产品设计与开发。主导过多个从0到1的产品，擅长用户研究、需求分析和产品规划。具有良好的沟通能力和团队协作精神，能够有效连接业务、设计和技术团队。</p>
                        </div>
                        <div class="resume-section">
                            <h2>工作经历</h2>
                            <div class="resume-item">
                                <div class="item-header">
                                    <h3>ABC科技有限公司</h3>
                                    <span class="item-date">2020.07 - 至今</span>
                                </div>
                                <p class="item-subtitle">高级产品经理</p>
                                <ul class="item-details">
                                    <li>负责企业协作SaaS平台的产品规划和迭代，带领4人产品团队，产品月活用户从5万增长到20万</li>
                                    <li>主导产品从单一工具向集成平台转型，设计并实施产品矩阵战略，新增3个子产品，提升用户留存率30%</li>
                                    <li>优化用户旅程和核心流程，通过A/B测试提升关键转化率25%，推动付费用户增长40%</li>
                                    <li>建立产品分析体系，通过数据驱动决策，识别并解决用户痛点，用户满意度提升15个百分点</li>
                                </ul>
                            </div>
                            <div class="resume-item">
                                <div class="item-header">
                                    <h3>XYZ互联网公司</h3>
                                    <span class="item-date">2016.03 - 2020.06</span>
                                </div>
                                <p class="item-subtitle">产品经理</p>
                                <ul class="item-details">
                                    <li>负责企业内部OA系统的需求分析、功能设计和产品迭代，服务5000+企业用户</li>
                                    <li>主导移动端产品从0到1的开发，制定产品路线图，协调设计和开发资源，按时交付核心功能</li>
                                    <li>通过用户访谈和数据分析，识别并解决系统使用率低的问题，提升日活跃度40%</li>
                                    <li>优化审批流程模块，减少50%的操作步骤，获得公司年度创新奖</li>
                                </ul>
                            </div>
                        </div>
                        <div class="resume-section">
                            <h2>教育经历</h2>
                            <div class="resume-item">
                                <div class="item-header">
                                    <h3>北京大学</h3>
                                    <span class="item-date">2012.09 - 2016.06</span>
                                </div>
                                <p class="item-subtitle">计算机科学与技术 | 本科</p>
                                <p class="item-details">主修课程：数据结构、算法分析、软件工程、人机交互、数据库系统</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
    <script src="js/resume-editor.js"></script>
</body>
</html>